<template>
  <div class="common-wrapper l-f l-col-stretch">
    <div class="left">
      <a-card title="部门" style="height: 100%">
        <a-tree
          :show-line="true"
          :tree-data="treeData"
          :replaceFields="replaceFields"
          :autoExpandParent="true"
          :defaultExpandAll="true"
          multiple
          @select="onTreeSelect"
        />
      </a-card>
    </div>
    <div class="right">
      <div class="common-search">
        <a-form-model :model="queryForm" layout="inline">
          <a-form-model-item>
            <a-button @click="onBatchScheduling" type="primary" class="l-mg-r10" :disabled="!hasSelected"
              >设置班次</a-button
            >
            <a-button @click="onCancelWork" type="primary" class="l-mg-r10 cancel-btn" :loading="cancelLoading" :disabled="!hasSelected"
              >取消考勤</a-button
            >
          </a-form-model-item>
          <a-form-model-item label="姓名">
            <a-input v-model="queryForm.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="工号">
            <a-input v-model="queryForm.id_card" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="工种">
            <a-select v-model="queryForm.work_type" mode="multiple" style="width: 185px">
              <a-select-option v-for="item in workList" :key="item.data_value">
                {{ item.data_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="排班类型">
            <a-select v-model="queryForm.attend_type" style="width: 150px">
              <a-select-option v-for="item in typeList" :key="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="getTableData" type="primary" icon="search">搜索</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="common-main" ref="main">
        <a-table
          size="middle"
          rowKey="pkey"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :scroll="{ y: 500, x: 1200 }"
          :data-source="dataSource"
          bordered
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="is_black_list" slot-scope="text, record">
          <!-- 是否是黑名单 1不是 2是 0离职 -->
           {{record.is_black_list == 1 ? '不是' : record.is_black_list == 2 ? '是' : '离职'}}
        </template>
        <template slot="attend_type" slot-scope="text, record">
          <!-- 排班类型 0固定班次 1轮班班次 null未设置 -->
           {{record.attend_type == 1 ? '轮班班次' : record.attend_type === 0 ? '固定班次' : '未设置'}}
        </template>
        </a-table>
      </div>
    </div>
    <SchedulingForm ref="schedulingFormRef" @saveSuccess="resetSelect" />
  </div>
</template>

<script>
import SchedulingForm from './components/crewRostering/SchedulingForm.vue'
import { getDepartmentThreeListApi } from '@/api/people'
import { getDatadictionary } from '@/api/plan'
import { getScheduleAttClassListApi,editScheduleAttClassApi } from '@/api/attendance'
export default {
  components: {
    SchedulingForm,
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data() {
    const columns = [
      {
        title: '编号',
        dataIndex: 'pkey',
        align: 'center',
        width: 60,
        // scopedSlots: { customRender: 'index' },
      },
      {
        title: '名称',
        dataIndex: 'person_name',
        align: 'center',
        width: 150,
      },
      {
        title: '性别',
        dataIndex: 'person_sex',
        align: 'center',
        width: 100
      },
      {
        title: '员工工号',
        dataIndex: 'person_idcard',
        align: 'center',
        width: 150,
      },
      {
        title: '工种',
        dataIndex: 'work_type_name',
        align: 'center',
        width: 150,
      },
      {
        title: '部门',
        dataIndex: 'dep_name',
        align: 'center',
        width: 150,
      },
      {
        title: '是否离职',
        dataIndex: 'is_black_list',
        align: 'center',
        width: 100,
        scopedSlots: { customRender: 'is_black_list' },
      },
      {
        title: '排班类型',
        dataIndex: 'attend_type',
        align: 'center',
        width: 100,
        scopedSlots: { customRender: 'attend_type' },
      },
      {
        title: '固定班次名称',
        dataIndex: 'class_name',
        align: 'center',
        width: 150,
      },
      {
        title: '轮班班次名称',
        dataIndex: 'shift_name',
        align: 'center',
        width: 150,
      },
      // {
      //   title: '周期',
      //   dataIndex: 'shift_cyc',
      //   align: 'center',
      //   width: 150,
      // },
    ]
    return {
      replaceFields: {
        children: 'childs',
        title: 'dep_name',
        key: 'pkey',
      },
      treeData: [
      {
          key: 0,
          dep_name: '全部',
          childs: [],
          disabled: true,
        }
      ],
      selectedKeys: [],
      queryForm: {
        name: '',
        id_card: '',
        work_type: [],
        attend_type: '-1'
      },
      // 工种列表
      workList: [],
      typeList: [
        {
          name: '全部',
          value: '-1',
        },
        {
          name: '固定班次 ',
          value: '0',
        },
        {
          name: '轮班班次 ',
          value: '1',
        },
        {
          name: '未设置班次 ',
          value: '99',
        },
      ],
      columns,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      cancelLoading: false,
      dataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {
    this.getWorkList()
    this.getDepartmentThreeList()
    this.getTableData()
  },
  methods: {
    onTreeSelect(selectedKeys, e) {
      this.selectedKeys = selectedKeys
      this.getTableData()
    },
    // 批量排班
    onBatchScheduling() {
      this.$refs.schedulingFormRef.edit(this.selectedRowKeys)
    },
    // 取消考勤
    async onCancelWork() {
        this.cancelLoading = true
        const { statusCode, errors } = await editScheduleAttClassApi({
          pkeys: this.selectedRowKeys,
          attend_type: null
        })
          this.cancelLoading = false
          if (statusCode == 200) {
            this.$message.success('取消成功！')
            this.resetSelect()
            this.getTableData()
          } else {
            this.$message.error(errors)
          }
    },
    resetSelect(){
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    // 获取列表数据
    async getTableData() {
      this.loading = true
      let department_names = this.selectedKeys.join(',')
      let work_types = this.queryForm.work_type.join(',')
      const { data } = await getScheduleAttClassListApi({
        ...this.queryForm,
        department_names,
        work_types,
        page_index: this.pagination.current,
        page_size: this.pagination.pageSize
      })
      this.loading = false
      this.dataSource = data.items
      this.pagination.total = data.totalCount
    },
    // 获取部门列表
    async getDepartmentThreeList() {
      const { data } = await getDepartmentThreeListApi()
      this.treeData[0].childs = data
    },
    // 获取工种列表
    async getWorkList() {
      const { data } = await getDatadictionary({ data_type: 3 })
      this.workList = this.workList.concat(data)
    },
  },
}
</script>

<style lang="less" scoped>
.left {
  width: 200px;
}
.right {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
  box-sizing: border-box;
}
.cancel-btn {
  background-color: #ff9f43;
  border-color: #ff9f43;
}
</style>